<template>
	<el-dialog :title="title" width="600" v-model="visible" :close-on-click-modal="false" :destroy-on-close="true" draggable>
		<el-form ref="menuDialogFormRef" :model="form" label-width="100px">
			<el-form-item label="选择文件" prop="fileRemarks">
				<el-input
					v-model.trim="form.fileRemarks"
					clearable
					placeholder="选择本地3dtiles的zip格式文件路径上传"
					style="width: 80%; margin-right: 10px"
				></el-input>
				<el-form-item prop="fileList">
					<div class="flex">
						<el-upload
							v-if="!singleFilePart.fileList.length > 0"
							v-model:file-list="singleFilePart.fileList"
							class="upload-demo"
							:limit="1"
							:headers="headers"
							accept=".zip"
							:show-file-list="false"
							:on-change="selectSinglePartFile"
							:before-upload="beforeUpload"
							:auto-upload="false"
						>
							<el-button type="primary">浏览</el-button>
						</el-upload>
					</div>
					<div v-if="singleFilePart.fileList.length > 0">{{ singleFilePart.fileName }}</div>
				</el-form-item>
			</el-form-item>
			<el-form-item label="输出目录" prop="fileRemarks">
				<el-input
					v-model.trim="form.fileRemarks"
					clearable
					placeholder="选择轻量化模型的储存路径"
					style="width: 80%; margin-right: 10px"
				></el-input>
				<el-form-item prop="fileList">
					<div class="flex">
						<el-upload
							v-if="!singleFilePart.fileList.length > 0"
							v-model:file-list="singleFilePart.fileList"
							class="upload-demo"
							:limit="1"
							:headers="headers"
							:show-file-list="false"
							:on-change="selectSinglePartFile"
							:before-upload="beforeUpload"
							:auto-upload="false"
						>
							<el-button type="primary">浏览</el-button>
						</el-upload>
					</div>
					<div v-if="singleFilePart.fileList.length > 0">{{ singleFilePart.fileName }}</div>
				</el-form-item>
			</el-form-item>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="最大纹理尺寸" prop="dataSourceType">
						<el-input v-model.trim="form.fileRemarks" clearable placeholder="请输入"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="纹理缩放比例" prop="dataSourceType">
						<el-input v-model.trim="form.fileRemarks" clearable placeholder="请输入"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<div class="checkbox">
				<el-checkbox-group v-model="checkedCities">
					<el-checkbox v-for="(item, index) in checkList" :label="item.label" :key="item.value">{{ item.label }}</el-checkbox>
				</el-checkbox-group>
			</div>
			<div class="text-center">
				<el-button type="primary" @click="onSubmit(menuDialogFormRef)">开始</el-button>
			</div>
		</el-form>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { addPost, editPost } from '/@/api/project';
import { useMessage } from '/@/hooks/message';
import { useUserInfo } from '/@/stores/userInfo';
const visible = ref(false);
const menuDialogFormRef = ref('');
const emit = defineEmits(['refresh']);
const title = ref('模型轻量化');
const oldWokeSpaceName = ref('');
const form = ref({});
const singleFilePart = ref({
	file: '',
	fileList: [],
	fileData: [],
	partNum: 0, // 总分片数
	fileName: '', // 文件名
	fileUid: '', // 文件uuid
	fileMd5: '', // 文件Md5
	isStop: false,
	randomCount: 0,
});

const checkedCities = ref([]);
const checkList = reactive([
	{
		label: '顶点压缩(有损压缩，如果模型有变形，可取消该选项)',
		value: 0,
	},
	{
		label: '使用实例(Instance)',
		value: 1,
	},
	{
		label: '压缩b3dm',
		value: 2,
	},
	{
		label: '公共纹理嵌入',
		value: 3,
	},
]);
const headers = computed(() => {
	return {
		Accept: 'application/octet-stream',
	};
});
// 下面是单文件分片上传的一些方法
function selectSinglePartFile(file, fileList) {
	singleFilePart.value.file = file;
	singleFilePart.value.fileList = [];
	singleFilePart.value.fileList.push(file);
	singleFilePart.value.fileName = file.name;
}

//上传成功
const beforeUpload = (file: any) => {
	if (accept.value.length) {
		const fileName = file.name.split('.');
		const fileExt = fileName[fileName.length - 1];
		fileType.value = fileExt;
		const isTypeOk = accept.value.indexOf(fileExt) >= 0;
		const adminId = useUserInfo().userInfos.user.userId;
		if (!isTypeOk && adminId !== '1') {
			useMessage().error(`文件格式不正确, 请上传${accept.value.join('/')}格式文件!`);
			singleFilePart.value.fileList = [];
		}
	}
};
//表单提交
const onSubmit = async (forms) => {
	await forms.validate((valid) => {
		if (valid) {
			if (title.value === '新建项目') {
				addPost(form.value)
					.then((res) => {
						if (res.data) {
							useMessage().success('发布成功');
							visible.value = false;
							reset();
							emit('refresh');
						}
					})
					.catch((res) => {
						console.log('重复添加');

						useMessage().error(res.msg);
					});
			} else {
				const { defaultStr, onEnable, wokeSpaceBack, projectNameCh } = form.value;
				editPost({
					oldWokeSpaceName: oldWokeSpaceName.value,
					newWokeSpaceName: form.value.wokeSpaceName,
					defaultStr,
					onEnable,
					wokeSpaceBack,
					projectNameCh,
				}).then((res) => {
					if (res.msg == 'ok') {
						useMessage().success('修改成功');
						visible.value = false;
						reset();
						emit('refresh');
					}
				});
			}

			// 更新上下文的 user信息
			useUserInfo().setUserInfos();
		}
	});
};
//重置表单
const reset = () => {
	form.value = {
		wokeSpaceName: '',
		onEnable: true,
		defaultStr: false,
		wokeSpaceBack: '',
	};
};
function openDialog() {
	visible.value = true;
}
defineExpose({
	openDialog,
	reset,
});
</script>
<style scoped lang="scss">
.text-center {
	text-align: right;
	margin-top: 18px;
}
.checkbox{
    background: #00000012;
    margin-top: 16px;
}
::v-deep .el-checkbox {
    margin-left: 20px;
    display: flex
}
</style>
